/**
 * @description  :   单选组件 
 * @descriptionDetail : 使用场景：提供单选数据，弹窗选择
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:20:53
 */
<template>
	<view class="single-page">
    <theme-navbar
      :isBack="false"
      :is-white="false"
      :title="title"
    >
      <view class="nav-right-icon" @click="handlerConfirm">
        确定
      </view>
    </theme-navbar>
		<view class="content">
      <u-row
        class="credit-container"
        v-for="(item, idx) in mDatas"
        :key="idx"
        @click="handlerSelectItem(item)"
      >
        <u-col :span="extHide ? 10 : 2" style="padding-right:0;">
          <view :class="isWrap?'title-wrap':'title'">
            {{ item.name }}
          </view>
        </u-col>
        <u-col span="8" v-if="!extHide">
          <view class="info" v-if="item.exts">
            <span class="info-item" v-for="(ext, extIdx) in item.exts" :key="extIdx">{{ ext }}</span>
          </view>
        </u-col>
        <u-col span="2" style="text-align:right;">
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="38"
            v-if="selectedItem.uid == item.uid"
          ></u-icon>
        </u-col>
        <!-- <u-divider color="#fa3534" half-width="100%"></u-divider> -->
      </u-row>
    </view>
	</view>
</template>

<script>
export default {
  name: "single-select",
  props: {
    /** 
     * {uid: 唯一键, name: 名称, exts: ['额外显示值1','额外显示值2']}
     */
    mDatas: {
      type: Array,
      default: () => []
    },
    dictType: {     // 字典类型
      type: String,
      default: '',
    },
	title:{
	  type: String,
	  default:"请选择",
	},
	extHide:{
	  type: Boolean,
	  default: false,
	},
	// 回显数据
	selectedData:{
	  type:Object,
	  default:undefined,
	},
	// 展示内容是否换行
	isWrap:{
	  type:Boolean,
	  default:false,
	}
  },
	data() {
		return {
      dictDatas: this.mDatas, // 字典数据
			selectedItem: {},     // 选中项
		};	
	},
  created () {
    if (this.dictType) {
      let dicts = this.$u.dic.getByDictCode(this.dictType);
      dicts.forEach(d => {
        d.uid = d.value;
        d.name = d.label;
      });
      this.dictDatas = dicts;
    }
	if(this.selectedData){
		this.selectedItem = this.selectedData;
	}
  },
	methods: {
    // 选中
    handlerSelectItem(item) {
      this.selectedItem = item;
    },
    // 确认
    handlerConfirm() {
      this.$emit("m-select", this.selectedItem);
    },
	}
};
</script>
<style lang="scss" scoped>
.single-page {
  padding: 10px;
  .nav-right-icon {
    color: #FFF;
    margin-right: 15px;
  }
  .u-checkbox-group {
    width: 100%;
  }
  .credit-container {
    min-height: 88rpx;
    border-bottom: 1px solid #e6e6e6;
    .info {
      display: flex;
      align-items: center;
      line-height: 100%;
      color: #999999;
      font-size: 12px;
      .info-item {
        background-color: #EFF3F9;
        border-radius: 5px;
        margin-right: 5px;
        padding: 5px 8px;
      }
    }
  }
  .title {
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
  }
  .title-wrap {
	padding: 10px 0;
  }
}
</style>